<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./css/bootstrap.css">
  <style>
    .card-deck{
      /*background: #000000;*/
      /*margin-bottom: 2rem;*/
    }
   /* .row div{
      background: #399;
      border:1px solid #000000;
    }*/
  .carousel{
    background: #399;
    /*height:10%;*/
    max-height:20rem;
  }
    .carousel .carousel-inner .carousel-item{
      max-height:20rem;
    }
  </style>
</head>
<body>
<!--列表组 -->
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item disabled">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
  <a href="http://www.baidu.com" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="http://www.baidu.com" class="list-group-item disabled">Morbi leo risus</a>
  <a href="http://www.baidu.com" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="http://www.baidu.com" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>

  <a href="http://www.baidu.com" class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in<span class="badge badge-primary badge-pill">14</span></a>
  <a href="http://www.baidu.com" class="list-group-item disabled">Morbi leo risus<span class="badge badge-primary">2</span></a>
  <a href="http://www.baidu.com" class="list-group-item list-group-item-action">Porta ac consectetur ac<span class="badge">1</span></a>
</ul>

<hr/>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>



<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="./js/bootstrap.js"></script>

</body>
</html>